<template>
  <div class="app-container">
<!--    <el-form :inline="true" ref="refForm" :model="form">-->
<!--      <el-form-item label="活动时间" prop="time">-->
<!--        <el-date-picker-->
<!--          v-model="form.time"-->
<!--          type="datetimerange"-->
<!--          align="right"-->
<!--          unlink-panels-->
<!--          range-separator="至"-->
<!--          start-placeholder="开始日期"-->
<!--          end-placeholder="结束日期"-->
<!--          :default-time="['00:00:00', '23:59:59']"-->
<!--          value-format="yyyy-MM-dd HH:mm:ss">-->
<!--        </el-date-picker>-->
<!--      </el-form-item>-->
<!--      <el-form-item>-->
<!--        <el-button class="filter-item" type="primary" icon="el-icon-search" @click="submitFilterForm">查询</el-button>-->
<!--        <el-button @click="selfResetForm('refForm')">重置</el-button>-->
<!--      </el-form-item>-->
<!--    </el-form>-->
    <div class="top-content"><span>参与人数：{{tableData.list.total}}</span><span>页面访问人数：{{visitNum.visitNum}}</span></div>
    <el-table
      border
      :data="tableData.list.list"
      v-loading="loading"
      element-loading-text="加载中..."
      class="el-table-align-center">
      <el-table-column prop="username" label="账号" align="center"></el-table-column>
      <el-table-column prop="vipLevel" label="VIP等级" align="center">
        <template slot-scope="{row}">
          {{row.vipLevel}}
        </template>
      </el-table-column>
      <el-table-column prop="betCount" label="累计有效投注金额" align="center">
      </el-table-column>
      <el-table-column prop="num" label="参与次数" align="center">
      </el-table-column>
      <el-table-column prop="goldenNum" label="金球数" align="center"></el-table-column>
      <el-table-column prop="silverNum" label="银球数" align="center"></el-table-column>
      <el-table-column prop="amountCount" label="累计获赠礼金"></el-table-column>
<!--      <el-table-column prop="jackpotAmount" label="获得奖池礼金"></el-table-column>-->
    </el-table>
    <div class="tips">累计有效投注金额：只统计活动期间用户投注</div>
    <div class="pagination-container">
      <el-pagination background @size-change="gridSizeChange" @current-change="gridCurrentChange"
                     :current-page="filters.page" :page-sizes="gridPageSize" :page-size="filters.size"
                     :layout="gridLayout" :total="tableData.list.total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { grid } from '@/build';
import { getPremierleagueCountList } from '@/services/api/activity';
import { visitNum } from './consts';

export default {
  name: 'list',
  mixins: [grid],
  data() {
    // const time = [moment().format('YYYY-MM-DD 00:00:00'), moment().format('YYYY-MM-DD 23:59:59')];
    // const startTime = time[0];
    // const endTime = time[1];
    return {
      tableData: {
        homePageUvNum: 0,
        list: {
          list: [],
          total: 0,
        },
      },
      // form: {
      // time,
      // },
      filters: {
        // startTime,
        // endTime,
        size: 10,
        page: 1,
      },
      visitNum,
    };
  },
  mounted() {
    this.bindGet(getPremierleagueCountList, 'tableData', {
      action: 'getGrid',
      sendingData: 'filters',
      beforeSend: (data) => {
        delete data.time;
        return data;
      },
      callback: ([result, data]) => {
        if (result) {
          this.tableData = data;
          this.visitNum.visitNum = data.homePageUvNum;
        }
      },
    });
    this.doGet({ action: 'getGrid' });
  },
  methods: {
    // submitFilterForm() {
    //   const { time } = this.form;
    //   let startTime;
    //   let endTime;
    //   if (!_.isUndefined(time) && _.isArray(time)) {
    //     startTime = time[0];
    //     endTime = time[1];
    //   }
    //   this.filters = {
    //     ...this.filters, ...this.form, startTime, endTime,
    //   };
    //   this.gridSearch();
    // },
    // selfResetForm(formName) {
    //   this.resetForm(formName);
    //   this.submitFilterForm();
    // },
  },
};
</script>

<style lang="scss" scoped>
  .top-content{
    margin-bottom: 20px;
    span{
      display: inline-block;
      &:first-child{
        margin-right: 30px;
      }
    }

  }
  .tips{
    margin-top: 10px;
    font-size: 14px;
    color: #d3d3d3;
  }
</style>
